<template>
  <bgm></bgm>
  <div class="page">
    <img src="/image/background.png" class="map" />
    <playerRunVue
      :direction="player.direction"
      :top="player.top"
      :left="player.left"
      :gender="player.gender"
    ></playerRunVue>
  </div>
  <theDice @randomTheDice="randomTheDice"></theDice>
  <van-popup v-model:show="showContent" @closed="closeAlert" class="alert">
    <div class="alertInfo">
      <h3>{{ alertInfo.h1 }}</h3>
      <p>{{ alertInfo.text }}</p>
      <p>{{ alertInfo.p }}</p>
    </div>
  </van-popup>
  <van-popup v-model:show="showEnd" @closed="closeAlert">
    <div class="end">
      <p>已经走完了2021年，美好的明天在等待着你。</p>
      <div class="end-btns">
        <p @click="reload">再来一次</p>
        <p @click="toShowAllInfo">浏览事件</p>
      </div>
    </div>
  </van-popup>
  <van-popup v-model:show="showAllInfo" @closed="closeAllInfo">
    <endVue :all-data="allData"></endVue>
  </van-popup>
</template>

<script>
import { reactive, ref } from "@vue/reactivity";

import { Popup } from "vant";
import playerRunVue from "../../components/player-run.vue";
import theDice from "@/components/the-dice.vue";
import bgm from "@/components/bgm.vue";
import endVue from "../../components/end.vue";
// 所有路径数据
import pathData from "@/utils/data.js";
import { onMounted } from "@vue/runtime-core";
export default {
  components: {
    [Popup.name]: Popup,
    bgm,
    playerRunVue,
    theDice,
    endVue,
  },
  setup() {
    // 数据
    const allData = reactive(pathData.jsonData);
    //比例
    const ratio = ref(1);

    let gender = localStorage.getItem("playerGender");
    if (!gender) {
      // 防止直接过来
      gender = "man";
    }
    const player = reactive({
      // 前进方向
      direction: "right",
      // 当前位置的下标
      index: 0,
      // 顶部距离
      top: 0,
      // 左边距离
      left: 0,
      // 性别
      gender: gender,
    });
    const showContent = ref(false);
    const alertInfo = reactive({ h1: "", p: "" , text: ''});
    // 角色移动 回调 每移动一格需要1s
    const playerMove = (index, finishIndex) => {
      // console.log(index, finishIndex);
      if(!ratio.value){
        ratio.value = Math.floor(((window.innerWidth * 0.85) / 520) * 100) / 100;
      }
      let item = pathData.jsonData[index];
      if (index <= finishIndex) {
        index += 1;
        player.direction = item?.dir || "right";
      } else {
        index -= 1;
        player.direction = item._dir;
      }
      item = pathData.jsonData[index];
      // console.log("item", item, index, finishIndex);
      if (item) {
        // 按照比例计算要走的大小 适配
        player.top = Math.floor(item.y * ratio.value * 100) / 100;
        player.left = Math.floor(item.x * ratio.value * 100) / 100;
        player.index = index;
        // 移动的时候 超过屏幕中间 设定一个自动向上拉屏幕的效果
        if (player.top > window.innerHeight / 2) {
          ScrollTop(player.top - window.innerHeight / 2, 500);
        }
        // 没有到达终点就继续走
        if (index !== finishIndex) {
          setTimeout(() => {
            // 计算朝向和新的位置
            // console.log("没有到达终点就继续走");
            playerMove(index, finishIndex);
          }, 500);
        } else {
          // 结束移动 展示内容
          if (item.alertInfo) {
            alertInfo.h1 = item.alertInfo.h1;
            alertInfo.p = item.alertInfo.p;
            alertInfo.status = item.alertInfo.status;
            alertInfo.text = item.alertInfo.text;
            setTimeout(() => {
              showContent.value = true;
            }, 800);
          }
          if (index === pathData.jsonData.length - 1) {
            showEnd.value = true;
          }
        }
      } else {
        showEnd.value = true;
      }
    };

    // 结束弹出
    const closeAlert = () => {
      if (alertInfo.status) {
        playerMove(player.index, player.index + Number(alertInfo.status));
      }
    };

    // 平滑滚动
    const ScrollTop = (number = 0, time) => {
      if (!time) {
        document.body.scrollTop = document.documentElement.scrollTop = number;
        return number;
      }
      const spacingTime = 20; // 设置循环的间隔时间  值越小消耗性能越高
      let spacingInex = time / spacingTime; // 计算循环的次数
      let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 获取当前滚动条位置
      let everTop = (number - nowTop) / spacingInex; // 计算每次滑动的距离
      let scrollTimer = setInterval(() => {
        if (spacingInex > 0) {
          spacingInex--;
          ScrollTop((nowTop += everTop));
        } else {
          clearInterval(scrollTimer); // 清除计时器
        }
      }, spacingTime);
    };

    // 骰子部分逻辑
    // 点数
    const theDiceNum = ref(1);
    const randomTheDice = (val) => {
      theDiceNum.value = val;
      // 开始移动
      let finalIndex = player.index + theDiceNum.value;
      if (finalIndex > pathData.jsonData.length - 1) {
        finalIndex = pathData.jsonData.length - 1;
      }
      playerMove(player.index, finalIndex);
    };
    const showEnd = ref(false);
    // 结束游戏 重新开始
    const reload = () => {
      location.reload();
    };
    // 显示所有信息
    const showAllInfo = ref(false);
    const toShowAllInfo = () => {
      showEnd.value = false;
      showAllInfo.value = true;
      // 默默走回起点
      playerMove(player.index -1, 0);
    };
    const closeAllInfo = () => {
      showAllInfo.value = false;
    };
    onMounted(() => {
      ratio.value = Math.floor(((window.innerWidth * 0.85) / 520) * 100) / 100;
      console.log(ratio.value);
      playerMove(-1, 0);
      // playerMove(54, 58);
      ScrollTop(0, 20);
    });
    return {
      allData,
      player,
      playerMove,
      showContent,
      alertInfo,
      closeAlert,
      theDiceNum,
      randomTheDice,
      ScrollTop,
      showEnd,
      reload,
      showAllInfo,
      toShowAllInfo,
      closeAllInfo,
    };
  },
};
</script>
<style>
.van-popup {
  background: transparent !important;
}
</style>
<style lang="scss" scoped>
.page {
  position: relative;
  text-align: center;
  padding-top: 40px;
  .map {
    width: 85vw;
  }
}

.alertInfo {
  width: 250px;
  height: 250px;
  background: url("/image/alert.png") no-repeat;
  background-size: cover;
  padding: 15px;
  box-sizing: border-box;
}

.end {
  width: 215px;
  // height: 215px;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  &-btns {
    display: flex;
    justify-content: space-evenly;
  }
}
</style>
